<template>
  <div class="agent_body" v-if="agentPersonForm.id">
    <div v-if="!isEdit">
      <div v-if="agentPersonForm.type == Tp_agentValue.LAWYER">

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">类型：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            {{ agentTypeLabel(agentPersonForm.type) ? agentTypeLabel(agentPersonForm.type) : '暂无' }}
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">代理申请人：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span> {{ applicantLabel(agentPersonForm.applicantnameList) ? applicantLabel(agentPersonForm.applicantnameList) : '暂无' }}</span>
                </template>
                {{ applicantLabel(agentPersonForm.applicantnameList) ? applicantLabel(agentPersonForm.applicantnameList) : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">名称：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            {{ agentPersonForm.name ? agentPersonForm.name : '暂无' }}
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">证件号:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.cardno ? agentPersonForm.cardno : '暂无' }}</span>
                </template>
                {{ agentPersonForm.cardno ? agentPersonForm.cardno : '暂无'}}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">联系号码:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.tel ? agentPersonForm.tel : '暂无'}}</span>
                </template>
                {{ agentPersonForm.tel ? agentPersonForm.tel : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">工作单位:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.unit ? agentPersonForm.unit : '暂无'}}</span>
                </template>
                {{ agentPersonForm.unit ? agentPersonForm.unit : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">地址:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.addr ? agentPersonForm.addr : '暂无'}}</span>
                </template>
                {{ agentPersonForm.addr ? agentPersonForm.addr : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="24" :lg="24" :sm="24" class="agent_file_div">
          <div class="agent_div_label">身份证明书:</div>
          <div v-if="agentPersonForm.doccardList && agentPersonForm.doccardList.length" style="width: 100%">
            <a v-for="item in agentPersonForm.doccardList" :key="item.id" class="file-css">
              <div style="width: 60%; display: flex; align-items: center">
                <span :title="item.filename" style="width: 100%;display: flex; align-items: center">
                  <span @click="previewFile(item)" class="beyond_hiding">
                    <a-icon type="folder" theme="filled" />
                    {{ item.filename }}
                  </span>
                </span>
              </div>
              <div style="width: 40%; display: flex; align-items: center;margin-right: 20px;">
                <div class="button_flex" @click="download(item)">
                  <a-icon type="download" style="margin-right: 8px" />
                  <a class="download_div">下载</a>
                </div>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(agentPersonForm, item, 1)">
                  <div class="button_flex">
                    <a-icon type="delete" style="margin-right: 8px" />
                    <a class="download_div">删除</a>
                  </div>
                </a-popconfirm>
              </div>
            </a>
          </div>
          <div v-else class="applicant_div_content">未上传附件</div>
        </a-col>

        <a-col :xxl="24" :lg="24" :sm="24" class="agent_file_div">
          <div class="agent_div_label">委托书:</div>
          <div v-if="agentPersonForm.fileentrustList && agentPersonForm.fileentrustList.length" style="width: 100%">
            <a v-for="item in agentPersonForm.fileentrustList" :key="item.id" class="file-css">
              <div style="width: 60%; display: flex; align-items: center">
                <span :title="item.filename" style="width: 100%;display: flex; align-items: center">
                  <span @click="previewFile(item)" class="beyond_hiding">
                    <a-icon type="folder" theme="filled" />
                    {{ item.filename }}
                  </span>
                </span>
              </div>
              <div style="width: 40%; display: flex; align-items: center;margin-right: 20px;">
                <div class="button_flex" @click="download(item)">
                  <a-icon type="download" style="margin-right: 8px" />
                  <a class="download_div">下载</a>
                </div>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(agentPersonForm, item, 2)">
                  <div class="button_flex">
                    <a-icon type="delete" style="margin-right: 8px" />
                    <a class="download_div">删除</a>
                  </div>
                </a-popconfirm>
              </div>
            </a>
          </div>
          <div v-else class="applicant_div_content">未上传附件</div>
        </a-col>

      </div>
      <div v-if="agentPersonForm.type == Tp_agentValue.LEGAL">

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">类型：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            {{ agentTypeLabel(agentPersonForm.type) ? agentTypeLabel(agentPersonForm.type) : '暂无' }}
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">代理申请人：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span> {{ applicantLabel(agentPersonForm.applicantnameList) ? applicantLabel(agentPersonForm.applicantnameList) : '暂无' }}</span>
                </template>
                {{ applicantLabel(agentPersonForm.applicantnameList) ? applicantLabel(agentPersonForm.applicantnameList) : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">名称：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            {{ agentPersonForm.name ? agentPersonForm.name : '暂无' }}
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">证件号:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.cardno ? agentPersonForm.cardno : '暂无' }}</span>
                </template>
                {{ agentPersonForm.cardno ? agentPersonForm.cardno : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">性别:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ genderLabel(agentPersonForm.gender) ? genderLabel(agentPersonForm.gender) : '暂无'}}</span>
                </template>
                {{ genderLabel(agentPersonForm.gender) ? genderLabel(agentPersonForm.gender) : '暂无'}}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">民族:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ nationLabel(agentPersonForm.nation) ? nationLabel(agentPersonForm.nation) : '暂无'}}</span>
                </template>
                {{ nationLabel(agentPersonForm.nation) ? nationLabel(agentPersonForm.nation) : '暂无'}}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">联系号码:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.tel ? agentPersonForm.tel : '暂无'}}</span>
                </template>
                {{ agentPersonForm.tel ? agentPersonForm.tel : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">地址:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.addr ? agentPersonForm.addr : '暂无'}}</span>
                </template>
                {{ agentPersonForm.addr ? agentPersonForm.addr : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="24" :lg="24" :sm="24" class="agent_file_div">
          <div class="agent_div_label">身份证明书:</div>
          <div v-if="agentPersonForm.doccardList && agentPersonForm.doccardList.length" style="width: 100%">
            <a v-for="item in agentPersonForm.doccardList" :key="item.id" class="file-css">
              <div style="width: 60%; display: flex; align-items: center">
                <span :title="item.filename" style="width: 100%;display: flex; align-items: center">
                  <span @click="previewFile(item)" class="beyond_hiding">
                    <a-icon type="folder" theme="filled" />
                    {{ item.filename }}
                  </span>
                </span>
              </div>
              <div style="width: 40%; display: flex; align-items: center;margin-right: 20px;">
                <div class="button_flex" @click="download(item)">
                  <a-icon type="download" style="margin-right: 8px" />
                  <a class="download_div">下载</a>
                </div>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(agentPersonForm, item, 1)">
                  <div class="button_flex">
                    <a-icon type="delete" style="margin-right: 8px" />
                    <a class="download_div">删除</a>
                  </div>
                </a-popconfirm>
              </div>
            </a>
          </div>
          <div v-else class="applicant_div_content">未上传附件</div>
        </a-col>

        <a-col :xxl="24" :lg="24" :sm="24" class="agent_file_div">
          <div class="agent_div_label">委托书:</div>
          <div v-if="agentPersonForm.fileentrustList && agentPersonForm.fileentrustList.length" style="width: 100%">
            <a v-for="item in agentPersonForm.fileentrustList" :key="item.id" class="file-css">
              <div style="width: 60%; display: flex; align-items: center">
                <span :title="item.filename" style="width: 100%;display: flex; align-items: center">
                  <span @click="previewFile(item)" class="beyond_hiding">
                    <a-icon type="folder" theme="filled" />
                    {{ item.filename }}
                  </span>
                </span>
              </div>
              <div style="width: 40%; display: flex; align-items: center;margin-right: 20px;">
                <div class="button_flex" @click="download(item)">
                  <a-icon type="download" style="margin-right: 8px" />
                  <a class="download_div">下载</a>
                </div>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(agentPersonForm, item, 2)">
                  <div class="button_flex">
                    <a-icon type="delete" style="margin-right: 8px" />
                    <a class="download_div">删除</a>
                  </div>
                </a-popconfirm>
              </div>
            </a>
          </div>
          <div v-else class="applicant_div_content">未上传附件</div>
        </a-col>

      </div>

      <div v-if="agentPersonForm.type == Tp_agentValue.CITIZEN">

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">类型：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            {{ agentTypeLabel(agentPersonForm.type) ? agentTypeLabel(agentPersonForm.type) : '暂无' }}
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">代理申请人：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span> {{ applicantLabel(agentPersonForm.applicantnameList) ? applicantLabel(agentPersonForm.applicantnameList) : '暂无' }}</span>
                </template>
                {{ applicantLabel(agentPersonForm.applicantnameList) ? applicantLabel(agentPersonForm.applicantnameList) : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">名称：</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            {{ agentPersonForm.name ? agentPersonForm.name : '暂无' }}
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">证件号:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.cardno ? agentPersonForm.cardno : '暂无' }}</span>
                </template>
                {{ agentPersonForm.cardno ? agentPersonForm.cardno : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">性别:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ genderLabel(agentPersonForm.gender) ? genderLabel(agentPersonForm.gender) : '暂无'}}</span>
                </template>
                {{ genderLabel(agentPersonForm.gender) ? genderLabel(agentPersonForm.gender) : '暂无'}}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">民族:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ nationLabel(agentPersonForm.nation) ? nationLabel(agentPersonForm.nation) : '暂无'}}</span>
                </template>
                {{ nationLabel(agentPersonForm.nation) ? nationLabel(agentPersonForm.nation) : '暂无'}}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">联系号码:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.tel ? agentPersonForm.tel : '暂无'}}</span>
                </template>
                {{ agentPersonForm.tel ? agentPersonForm.tel : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">地址:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.addr ? agentPersonForm.addr : '暂无'}}</span>
                </template>
                {{ agentPersonForm.addr ? agentPersonForm.addr : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="8" :lg="8" :sm="24" class="agent_div">
          <a-col :xxl="4" :lg="4" :sm="24" class="agent_div_label">邮政编码:</a-col>
          <a-col :xxl="20" :lg="20" :sm="24" class="agent_div_content">
            <div class="beyond_hiding">
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ agentPersonForm.postcode ? agentPersonForm.postcode : '暂无'}}</span>
                </template>
                {{ agentPersonForm.postcode ? agentPersonForm.postcode : '暂无' }}
              </a-tooltip>
            </div>
          </a-col>
        </a-col>

        <a-col :xxl="24" :lg="24" :sm="24" class="agent_file_div">
          <div class="agent_div_label">身份证明:</div>
          <div v-if="agentPersonForm.filecardList && agentPersonForm.filecardList.length" style="width: 100%">
            <a v-for="item in agentPersonForm.filecardList" :key="item.id" class="file-css">
              <div style="width: 60%; display: flex; align-items: center">
                <span :title="item.filename" style="width: 100%;display: flex; align-items: center">
                  <span @click="previewFile(item)" class="beyond_hiding">
                    <a-icon type="folder" theme="filled" />
                    {{ item.filename }}
                  </span>
                </span>
              </div>
              <div style="width: 40%; display: flex; align-items: center;margin-right: 20px;">
                <div class="button_flex" @click="download(item)">
                  <a-icon type="download" style="margin-right: 8px" />
                  <a class="download_div">下载</a>
                </div>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(agentPersonForm, item, 0)">
                  <div class="button_flex">
                    <a-icon type="delete" style="margin-right: 8px" />
                    <a class="download_div">删除</a>
                  </div>
                </a-popconfirm>
              </div>
            </a>
          </div>
          <div v-else class="applicant_div_content">未上传附件</div>
        </a-col>

        <a-col :xxl="24" :lg="24" :sm="24" class="agent_file_div">
          <div class="agent_div_label">委托书:</div>
          <div v-if="agentPersonForm.fileentrustList && agentPersonForm.fileentrustList.length" style="width: 100%">
            <a v-for="item in agentPersonForm.fileentrustList" :key="item.id" class="file-css">
              <div style="width: 60%; display: flex; align-items: center">
                <span :title="item.filename" style="width: 100%;display: flex; align-items: center">
                  <span @click="previewFile(item)" class="beyond_hiding">
                    <a-icon type="folder" theme="filled" />
                    {{ item.filename }}
                  </span>
                </span>
              </div>
              <div style="width: 40%; display: flex; align-items: center;margin-right: 20px;">
                <div class="button_flex" @click="download(item)">
                  <a-icon type="download" style="margin-right: 8px" />
                  <a class="download_div">下载</a>
                </div>
                <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗？" @confirm="() => deleteAgentFile(agentPersonForm, item, 2)">
                  <div class="button_flex">
                    <a-icon type="delete" style="margin-right: 8px" />
                    <a class="download_div">删除</a>
                  </div>
                </a-popconfirm>
              </div>
            </a>
          </div>
          <div v-else class="applicant_div_content">未上传附件</div>
        </a-col>

      </div>
    </div>
    <a-form-model
      v-else
      ref="agentPersonAddRef"
      :rules="rules"
      style="width: 100%"
      labelAlign="left"
      :model="agentPersonForm"
    >
      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="代理人类型" prop="type" has-feedback>
          <a-select allow-clear placeholder="请选择代理人类型" v-model="agentPersonForm.type" @change="changePersonType">
            <a-select-option v-for="item in Tp_agentList" :key="item.value">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="代理申请人/第三人" prop="applicantname" has-feedback>
          <a-select mode="multiple" allow-clear placeholder="请选择代理申请人/第三人" v-model="agentPersonForm.applicantnameList" >
            <a-select-option v-for="item in selectUserList" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="姓名"
          prop="name">
          <a-input
            v-model="agentPersonForm.name"
            allow-clear
            placeholder="请输入姓名" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="agentPersonForm.type == Tp_agentValue.LEGAL">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="证件类型"
          prop="cardtype"
          has-feedback
        >
          <a-select allow-clear placeholder="请选择证件类型" v-model="agentPersonForm.cardtype">
            <a-select-option v-for="item in Tp_card" :key="item.id">
              {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="证件号"
          prop="cardno">
          <a-input
            v-model="agentPersonForm.cardno"
            allow-clear
            placeholder="请输入证件号" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="agentPersonForm.type == Tp_agentValue.LAWYER || agentPersonForm.type == Tp_agentValue.LEGAL">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="性别"
          prop="gender"
        >
          <a-select allow-clear placeholder="请选择性别" v-model="agentPersonForm.gender">
            <a-select-option v-for="item in Tp_gender" :key="item.id">
              {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="agentPersonForm.type == Tp_agentValue.LAWYER || agentPersonForm.type == Tp_agentValue.LEGAL">
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="民族"
          prop="nation"
        >
          <a-select allow-clear placeholder="请选择民族" v-model="agentPersonForm.nation">
            <a-select-option v-for="item in Tp_nation" :key="item.id">
              {{ item.description }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="联系电话" prop="tel">
          <a-input v-model="agentPersonForm.tel" allow-clear placeholder="请输入联系电话" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="agentPersonForm.type == Tp_agentValue.LAWYER || agentPersonForm.type == Tp_agentValue.CITIZEN">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="工作单位（律所名称）" prop="unit">
          <a-input v-model="agentPersonForm.unit" allow-clear placeholder="请输入工作单位（律所名称）" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="送达地址/地址" prop="addr">
          <a-input v-model="agentPersonForm.addr" allow-clear placeholder="请输入送达地址/地址" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="12" :lg="12" :sm="24" v-if="agentPersonForm.type == Tp_agentValue.CITIZEN">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="邮政编码" prop="postcode">
          <a-input v-model="agentPersonForm.postcode" allow-clear placeholder="请输入邮政编码" />
        </a-form-model-item>
      </a-col>

      <a-col :xxl="24" :lg="24" :sm="24" v-if="agentPersonForm.type == Tp_agentValue.CITIZEN">
        <a-form-model-item
          label="身份证明"
          prop="filecard"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span:12 }"
        >
          <a-upload
            :accept="acceptFileType"
            :file-list="filecardList"
            :remove="(file) => removeFile(file, 1)"
            name="file"
            :multiple="true"
          >
            <a @click.stop="uploadFile(1)">
              <a-icon type="upload" style="margin-right: 10px"></a-icon>
              <span>上传</span>
            </a>

          </a-upload>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="24" :lg="24" :sm="24" v-if="agentPersonForm.type == Tp_agentValue.LAWYER || agentPersonForm.type == Tp_agentValue.LEGAL">
        <a-form-model-item
          label="身份证明书"
          prop="doccard"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-upload
            :accept="acceptFileType"
            :file-list="doccardList"
            :remove="(file) => removeFile(file, 2)"
            name="file"
            :multiple="true"
          > 
            <a @click.stop="uploadFile(2)">
              <a-icon type="upload" style="margin-right: 10px"></a-icon>
              <span>上传</span>
            </a>
          </a-upload>
        </a-form-model-item>
      </a-col>

      <a-col :xxl="24" :lg="24" :sm="24">
        <a-form-model-item
          label="委托书"
          prop="fileentrust"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-upload
            :accept="acceptFileType"
            :file-list="fileentrustList"
            :remove="(file) => removeFile(file, 0)"
            name="file"
            :multiple="true"
          >
            <a @click.stop="uploadFile(0)">
              <a-icon type="upload" style="margin-right: 10px"></a-icon>
              <span>上传</span>
            </a>

          </a-upload>
        </a-form-model-item>
      </a-col>

    </a-form-model>

    <div class="agent_operate_div" v-if="agentPersonForm">
      <div v-if="!isEdit" style="font-size: 16px;color:#40a9ff" @click="() => { isEdit = true}">
        <a-icon type="edit" style="margin-right: 5px;" />
        <span>编辑</span>
      </div>
      <div v-else>
        <span @click="onSubmit" style="margin-right: 10px;" >
          <a-icon type="save" style="margin-right: 5px;" />
          <span>保存</span>
        </span>
        <span @click="cancelSubmit">
          <a-icon type="rollback" style="margin-right: 5px;" />
          <span>取消</span>
        </span>
      </div>
    </div>
    <MultiUploadBasic ref="multiUploadBasic" @importFileFun="importFileFun"></MultiUploadBasic>
    <!-- <template slot="footer">
      <div style="display: flex; justify-content: center">
        <a-button class="m-r-8" icon="cancel" @click="onClose"> 取消 </a-button>
        <a-button
          class="m-r-8"
          type="primary"
          @click="onSubmit"
          icon="save"
          :loading="loading"
          v-if="applyid != ''">
          保存
        </a-button>
      </div>
    </template> -->
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
import { minioUpload, minioRemove, minioUploadMore } from '@/api/base/file'
import { Tp_agentList, Tp_agentValue } from '@/enumeration/Tp_agent'
import { queryEnumeration } from '@/api/accept/enum_load'
import { FILETYPE, FILESIZE } from '@/store/mutation-types'
import { saveMaterialRepeat } from '@/api/accept/aprv_process_materials'
import { Tp_procmaterialValue } from '@/enumeration/Tp_procmaterial'
import { Tp_proctypeValue } from '@/enumeration/Tp_proctype'
import { APP_USER } from '@/store/mutation-types.js'
import storage from 'store'
import { getApplicantAndThirdList } from '@/api/accept/apl_applicant'
import { saveAgent, deleteAgentFile } from '@/api/accept/apl_agent'
import { kkfilePreview, downloadFileWithUrl } from '@/utils/util.js'

export default {
  props: {
    applyid: {
      // 申请id
      type: String,
      required: true
    }
  },
  data () {
    return {
      labelCol: { span: 8 }, // label宽
      wrapperCol: { span: 14 }, // 组件宽
      loading: false, // 按钮显示
      isModel: false, // 模态框显示
      Tp_agentList: Tp_agentList,
      Tp_agentValue: Tp_agentValue,
      Tp_card: [], // 证件类型
      Tp_gender: [], // 性别
      Tp_nation: [], // 民族
      agentPersonForm: {
        id: undefined, // id
        applyid: undefined, // applyid
        type: undefined, // 代理人类型
        name: undefined, // 名称
        cardtype: undefined, // 证件类型
        cardno: undefined, // 证件号
        gender: undefined, // 性别
        nation: undefined, // 民族
        addr: undefined, // 送达地址（住址）
        unit: undefined, // 工作单位（律所名称）
        tel: undefined, // 电话
        postcode: undefined, // 邮政编码
        applicantname: undefined, // 代理申请人/第三人
        applicantnameList: [],
        filecard: undefined, // 身份证明
        doccard: undefined, // 身份证明书
        fileentrust: undefined // 委托书
      },
      agentPersonFormClone: {},
      filecardList: [], // 身份证明文件
      doccardList: [], // 身份证明书文件
      fileentrustList: [], // 委托书文件
      /**
       * 添加表单验证规则
       */
       rules: {
        type: [{ required: true, message: '请选择代理人类型', trigger: 'change' }],
        applicantnameList: [{ required: true, message: '请选择代理申请人/第三人类型', trigger: 'change' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        // cardno: [{ validator: this.checkCardno }],
        cardno: [{ required: true, message: '请输入证件号', trigger: 'blur' }],
        tel: [{ validator: this.checkTel }],
        postcode: [{ validator: this.checkPostcode }]
      },
      labelTitle: '',
      acceptFileType: FILETYPE,
      operateType: undefined,
      Tp_procmaterialValue: Tp_procmaterialValue,
      Tp_proctypeValue: Tp_proctypeValue,
      currentUser: storage.get(APP_USER),
      deleteFileList: [], // 删除的文件列表
      selectUserList: [],
      isEdit: false
    }
  },
  components: {
    MultiUploadBasic: () => import('@/views/materials/multiUpload/MultiUploadBasic.vue')
  },
  async created () {
    this.queryEnumeration('Tp_card', (val) => {
      this.Tp_card = val
    })
    this.queryEnumeration('Tp_gender', (val) => {
      this.Tp_gender = val
    })
    this.queryEnumeration('Tp_nation', (val) => {
      this.Tp_nation = val
    })
    this.selectUserList = []
    const res = await getApplicantAndThirdList(this.applyid)
    if (res.code == 0) {
      this.selectUserList = [...res.data.applicant, ...res.data.third]
    } else {
      this.selectUserList = []
    }
  },
  methods: {

    init (isEdit, editForm) {
      if (isEdit) {
        this.labelTitle = '编辑代理人'
        this.resetFileList()
        this.agentPersonForm = Object.assign({}, this.agentPersonForm, editForm)
        this.agentPersonForm.applicantnameList = this.agentPersonForm.applicantname.split(',')
        this.agentPersonFormClone = JSON.parse(JSON.stringify(this.agentPersonForm))
        if (editForm.filecardList != null && editForm.filecardList != undefined) {
          editForm.filecardList.forEach(item => {
            const file = {
              uid: item.id,
              name: item.filename,
              status: 'done',
              url: item.path,
              flag: item.id
            }
            this.filecardList.push(file)
          })
        }
        if (editForm.doccardList != null && editForm.doccardList != undefined) {
          editForm.doccardList.forEach(item => {
            const file = {
              uid: item.id,
              name: item.filename,
              status: 'done',
              url: item.path,
              flag: item.id
            }
            this.doccardList.push(file)
          })
        }
        if (editForm.fileentrustList != null && editForm.fileentrustList != undefined) {
          editForm.fileentrustList.forEach(item => {
            const file = {
              uid: item.id,
              name: item.filename,
              status: 'done',
              url: item.path,
              flag: item.id
            }
            this.fileentrustList.push(file)
          })
        }
      } else {
        this.labelTitle = '新增代理人'
        this.agentPersonForm = {
          id: undefined, // id
          applyid: undefined, // applyid
          type: undefined, // 代理人类型
          name: undefined, // 名称
          cardtype: undefined, // 证件类型
          cardno: undefined, // 证件号
          gender: undefined, // 性别
          nation: undefined, // 民族
          addr: undefined, // 送达地址（住址）
          unit: undefined, // 工作单位（律所名称）
          tel: undefined, // 电话
          postcode: undefined, // 邮政编码
          applicantname: undefined, // 代理申请人/第三人
          applicantnameList: [],
          filecard: undefined, // 身份证明
          doccard: undefined, // 身份证明书
          fileentrust: undefined // 委托书
        }
        this.agentPersonForm.applicantnameList = this.agentPersonForm.applicantname.split(',')
        this.agentPersonFormClone = JSON.parse(JSON.stringify(this.agentPersonForm))
        this.resetFileList()
        this.agentPersonForm.id = this.applyid + nanoid()
        this.agentPersonForm.applyid = this.applyid
        if (this.applyid == '' || this.applyid == undefined) {
          this.$message.error('当前传入的applyid为空, 无法正常新增')
        }
        this.resetForm()
      }
      if (this.$refs.agentPersonAddRef) {
        this.$refs.agentPersonAddRef.clearValidate()
      }
    },
    /*
    * 查询枚举值
    */
    async queryEnumeration (val, callback) {
      await queryEnumeration({ 'enName': val }).then((res) => {
        if (res.code !== 0) {
          console.log('查询枚举值错误')
        } else {
          callback(res.data)
        }
      })
    },

    agentTypeLabel (val) {
      for (const key in this.Tp_agentList) {
        if (this.Tp_agentList[key].value == val) {
          return this.Tp_agentList[key].name
        }
      }
      return val
    },
    applicantLabel (val) {
      let userName = []
      if (this.selectUserList) {
        userName = this.selectUserList.filter(el => val.includes(el.id)).map(el => el.name)
      }
      return userName ? userName.join(',') : ''
    },
    genderLabel (val) {
      for (const key in this.Tp_gender) {
        if (this.Tp_gender[key].id == val) {
          return this.Tp_gender[key].description
        }
      }
      return val
    },
    nationLabel (val) {
      for (const key in this.Tp_nation) {
        if (this.Tp_nation[key].id == val) {
          return this.Tp_nation[key].description
        }
      }
      return val
    },

    checkCardno (rule, value, callback) {
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error('证件号码不正确'))
      }
      callback()
    },
    checkTel (rule, value, callback) {
      if (value && !/^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/.test(value)) {
        callback(new Error('联系号码不正确'))
      }
      callback()
    },
    checkPostcode (rule, value, callback) {
      if (value && !/^[0-9]{6}$/.test(value)) {
        callback(new Error('邮政编码不正确'))
      }
      callback()
    },

    resetFileList () {
      this.filecardList = [] // 身份证明文件
      this.doccardList = [] // 身份证明书文件
      this.fileentrustList = []
    },
    /**
     * 重置表单
     */
     resetForm () {
      console.log('form', this.$refs.agentPersonAddRef)
      if (this.$refs.agentPersonAddRef) {
        this.$refs.agentPersonAddRef.clearValidate()
      }
      this.resetFileList()
    },
    download (record) {
      if (record && record.path) {
        downloadFileWithUrl(record.path, record.filename)
      }
    },
    // 预览文件
    previewFile (record) {
      window.open(kkfilePreview(record.path))
    },
    deleteAgentFile (record, file, type) {
      if (type == null || type == undefined) {
        this.$message.error('操作类型为空')
      }
      deleteAgentFile({ id: record.id, type: type, attachid: file.id }).then(res => {
        console.log('deleteAgentFile', res.data)
        if (res.code == 0) {
          this.$emit('requery')
        } else {
          this.$message.success('删除失败')
        }
      })
    },

    removeFile (file, type) {
      if (type === 0) {
        this.fileentrustList = this.fileentrustList.filter((item) => item.uid !== file.uid)
      } else if (type === 1) {
        this.filecardList = this.filecardList.filter((item) => item.uid !== file.uid)
      } else if (type === 2) {
        this.doccardList = this.doccardList.filter((item) => item.uid !== file.uid)
      }
      this.deleteFileList.push(file.uid)
    },
    minioRemove (fileId) {
      minioRemove({ 'fileid': fileId }).then((res) => {
        console.log('res', res)
        if (res.code !== 0) {
          console.log('删除文件失败', res)
        } else {
          console.log('删除文件成功', fileId)
        }
      })
    },
    // 上传附件
    uploadFile (operateType) {
      // this.selectData = record
      this.operateType = operateType
      this.$refs.multiUploadBasic.importVisible = true
    },
    /**
     * 确定保存导入数据
     */
    importFileFun (importFileList) {
      let _this = this
      console.log('importFileList', importFileList)
      const files = []
      importFileList.forEach((item) => {
        files.push(item)
      })
      this.$refs.multiUploadBasic.loading = true
      if (this.operateType == null || this.operateType == undefined) {
        this.$message.error('操作类型为空')
      }
      minioUploadMore(files).then((res) => {
        if (res.code == 0) {
          const attachs = res.data
          attachs.forEach((attach) => {
            const file = {
              uid: attach.id,
              name: attach.filename,
              status: 'done',
              url: attach.url,
              flag: attach.id
            }
            if (this.operateType === 0) {
              _this.fileentrustList.push(file)
            } else if (this.operateType === 1) {
              _this.filecardList.push(file)
            } else if (this.operateType === 2) {
              _this.doccardList.push(file)
            }
          })
          this.$message.success('上传成功')
          this.$refs.multiUploadBasic.handleCancel()
        } else {
          this.$message.success('上传失败')
          this.$refs.multiUploadBasic.handleCancel()
        }
      }).finally(() => {
        this.$refs.multiUploadBasic.loading = false
      })
    },
    cancelSubmit () {
      this.agentPersonForm = this.agentPersonFormClone
      this.isEdit = false
    },
    /**
     * 提交表单
     */
     onSubmit () {
      const _this = this
      this.$refs.agentPersonAddRef.validate((valid) => {
        _this.loading = true
        if (valid) {
          if (_this.fileentrustList != null && _this.fileentrustList.length > 0) {
            const uploadFile = []
            _this.fileentrustList.forEach((item) => {
              uploadFile.push(item.uid)
            })
            _this.agentPersonForm.fileentrust = uploadFile.join(',')
          } else {
            _this.agentPersonForm.fileentrust = ''
          }
          if (_this.filecardList != null && _this.filecardList.length > 0) {
            const uploadFile = []
            _this.filecardList.forEach((item) => {
              uploadFile.push(item.uid)
            })
            _this.agentPersonForm.filecard = uploadFile.join(',')
          } else {
            _this.agentPersonForm.filecard = ''
          }
          if (_this.doccardList != null && _this.doccardList.length > 0) {
            const uploadFile = []
            _this.doccardList.forEach((item) => {
              uploadFile.push(item.uid)
            })
            _this.agentPersonForm.doccard = uploadFile.join(',')
          } else {
            _this.agentPersonForm.doccard = ''
          }
          if (_this.agentPersonForm.applicantnameList != null && _this.agentPersonForm.applicantnameList.length > 0) {
            _this.agentPersonForm.applicantname = _this.agentPersonForm.applicantnameList.join(',')
          }

          // 通过类型来重置部分值
          if (this.agentPersonForm.type === this.Tp_agentValue.LAWYER) {
            this.agentPersonForm.cardtype = undefined
            this.agentPersonForm.postcode = undefined
            this.agentPersonForm.filecardList = []
            this.agentPersonForm.filecard = undefined
          } else if (this.agentPersonForm.type === this.Tp_agentValue.LEGAL) {
            this.agentPersonForm.unit = undefined
            this.agentPersonForm.postcode = undefined
            this.agentPersonForm.filecardList = []
            this.agentPersonForm.filecard = undefined
          } else if (this.agentPersonForm.type === this.Tp_agentValue.CITIZEN) {
            this.agentPersonForm.doccardList = []
            this.agentPersonForm.doccard = undefined
          }
          saveAgent(this.agentPersonForm).then((res) => {
            _this.loading = false
            if (res.code !== 0) {
              _this.$message.error('委托代理人保存失败')
            } else {
              _this.$message.success('保存成功')
              if (this.deleteFileList && this.deleteFileList.length > 0) {
                this.deleteFileList.forEach((fileId) => {
                  this.minioRemove(fileId)
                })
              }
              _this.$emit('requery')
              this.isEdit = false
            }
          })
        } else {
          _this.loading = false
          // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
          // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
          setTimeout(() => {
            const isError = document.getElementsByClassName('has-error')
            const input = isError[0].querySelector('input')
            // console.log(input)
            if (input !== null && input !== 'undefind' && input !== '') {
              isError[0].querySelector('input').focus()
                ? isError[0].querySelector('input').focus()
                : isError[0].querySelector('input').click()
            } else {
              isError[0].querySelector('textarea').focus()
            }
          }, 10)
          return false
        }
      })
    },

    changePersonType () {
      if (this.$refs.agentPersonAddRef) {
        this.$refs.agentPersonAddRef.clearValidate()
      }
    }
  }
}
</script>

<style lang="less" scoped>

 .agent_body {
    padding: 16px 32px;
    border: 1px solid  rgb(0, 114, 198);
    background-color: #f3f6fb;
    display: inline-block;
    width: 100%;
    ::v-deep .ant-form label {
      font-size: 16px;
    }
    ::v-deep .ant-form-item-label {
      font-size: 16px;
    }
  }
  .agent_div {
    margin: 10px 0px;
    display: flex;
    align-items: center;
  }
  .agent_file_div {
    margin: 10px 0px;
    display: flex;
  }
  .agent_div_label {
    font-size: 16px;
    font-weight: bold;
    width: 120px;
  }
  .agent_div_content {
    // display: flex;
    // align-items: center;
    font-size: 16px;

    width: 60%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
  }
  .file-css {
    display: flex;
    width: 100%;
    max-width: 650px;
  }
  .agent_operate_div {
    display: flex;
    width: 100%;
    align-items: flex-end;
    margin-right: 20px;
    flex-direction: row-reverse;
    color: #40a9ff;
    cursor: pointer;
    padding-bottom: 20px;
  }
</style>
